<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF8"%>
<%
	if(session.getAttribute("uid") == null){ //判断是否登录
		response.sendRedirect(request.getContextPath() + "/login.jsp");
	}
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 收件箱</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="./public/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="./public/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="./public/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="./public/css/animate.css" rel="stylesheet">
    <link href="./public/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content mailbox-content">
                        <div class="file-manager">
                            <a class="btn btn-block btn-primary compose-mail" href="./MessageSend">写信</a>
                            <div class="space-25"></div>
                            <h5>文件夹</h5>
                            <ul class="folder-list m-b-md" style="padding: 0">
                                <li>
                                    <a href="./index.jsp"> <i class="fa fa-inbox "></i> 收件箱
                                    </a>
                                </li>
                                <li>
                                    <a href="./MessageSend"> <i class="fa fa-envelope-o"></i> 发信</a>
                                </li>
                                <li>
                                    <a href="./UserLogout"> <i class="fa fa-sign-out"></i> 退出</a>
                                </li>
                            </ul>
                            
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight">
                <div class="mail-box-header">
                    <h2>
                    收件箱<label class="label label-warning messageAmount" style="margin-left: 5px;"></label>
                </h2>
                    <div class="mail-tools tooltip-demo m-t-md">
                        <div class="btn-group pull-right">
                            <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i>
                            </button>
                            <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i>
                            </button>

                        </div>
                        <button class="btn btn-white btn-sm refreshList" data-toggle="tooltip" data-placement="left" title="刷新邮件列表"><i class="fa fa-refresh"></i> 刷新</button>
                        <button class="btn btn-white btn-sm deleteMessage" data-toggle="tooltip" data-placement="top" title="删除"><i class="fa fa-trash-o"></i>
                        </button>

                    </div>
                </div>
                <div class="mail-box">

                    <table class="table table-hover table-mail">
                        <thead>
                            <tr>
                                <th>选项</th>
                                <th>发送人</th>
                                <th>消息内容</th>
                                <th>发送时间</th>
                            </tr>
                        </thead>
                        <tbody class="messagelist">

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script src="./public/js/jquery.min.js?v=2.1.4"></script>
    <script src="./public/js/bootstrap.min.js?v=3.3.6"></script>



    <!-- 自定义js -->
    <script src="./public/js/content.js?v=1.0.0"></script>


    <!-- iCheck -->
    <script src="./public/js/plugins/iCheck/icheck.min.js"></script>
    <script>

        var page = 1;

        $(document).ready(function () {
            getMessageList();

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            //刷新
            $('.refreshList').click(function(){
                getMessageList();
            });
            
            //删除
            $('.deleteMessage').click(function(){
            	deleteMessage();
            });
        });

        /**
         * 删除选中消息
         * [deleteMessage description]
         * @return {[type]} [description]
         */
        function deleteMessage(){
            var message = '';
            $(".check-mail input").each(function(){
                if ($(this).is(':checked')) {
                    message += $(this).attr('data-mid') + ',';
                }
            });
            message = message.substring(0,message.length-1);
            //console.log(message);
            window.location.href = './MessageDelete?id='+message;
        }
        
        /**
         * ajax获取消息列表
         * [getMessageList description]
         * @return {[type]} [description]
         */
        function getMessageList(){
            $.ajax({
                url: './MessageList',
                data: {'page':page},
                type: 'get',
                dataType: 'json',
                success:function(data){
                    //console.log(data); //调试
                    setMessageList(data);
                },
                error: function (xmlHttpRequest, error) {
                    alert("数据载入失败");
                }
            });
        }
        
        /**
         * 输出html
         * [setMessageList description]
         * @param {[type]} data [description]
         */
        function setMessageList(data){
            $('.messageAmount').html(data.length);
            $('.messagelist').html('');
            var domstr;
            for (var i = 0; i < data.length; i++) {
                var readSign = data[i].readSign == 1 ? 'read' : 'unread';
                domstr += '<tr class="'+readSign+'"><td class="check-mail"><input type="checkbox" class="i-checks" data-mid="'+data[i].id+'"></td>';
                domstr += '<td class="mail-ontact"><a href="./MessageDetail?mid='+data[i].id+'">'+data[i].sendUname+'</a></td>';
                domstr += '<td class="mail-subject"><a href="./MessageDetail?mid='+data[i].id+'">'+data[i].note+'</a></td>';
                domstr += '<td class="mail-date">'+data[i].postTime+'</td></tr>'
            }
            $('.messagelist').append(domstr);
        }


    </script>

    
    

</body>

</html>
